<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:350px;height:350px;position: relative;}

        .middleBox{width:350px;height:350px;position: relative;}
        .middleBox img{width:350px;height:350px;}
        .middleBox span{position:absolute;left:0;top:0;background:rgba(255,100,100,0.6);display:none;}
        .middleBox em{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1}

        .bigBox{width:350px;height:350px;position:absolute;left: 400px;top:0;overflow: hidden;display:none;}
        .bigBox img{position:absolute;left:0;top:0;width:800px;height:800px;}

        .list{width:330px;height:50px;padding:10px;position:relative;margin: 10px 0;overflow: hidden;}
        .list .listImg{width:666px;}
        .list .listImg img{float: left;margin: 0 10px;border:solid 2px transparent;cursor: pointer;}
        .list .listImg img.active{border-color:blue;}
        .list span{position: absolute;top:0;width:20px;height:70px;line-height:70px;font-size:12px;text-align: center;background: rgba(200,200,200,0.6);}
        .list span.left{left:0}
        .list span.right{right:0}
    </style>
</head>
<body>
    <div class="box">
        <div class="showBox">
            <div class="middleBox">
                <img src="" alt="">
                <span></span>
                <em></em>
            </div>
            <!-- <div class="list">
                <div class="listImg">
                    <img class="active" src="./imgs/s0.jpg" alt="">
                    <img src="./imgs/s1.jpg" alt="">
                    <img src="./imgs/s2.jpg" alt="">
                    <img src="./imgs/s0.jpg" alt="">
                    <img src="./imgs/s1.jpg" alt="">
                    <img src="./imgs/s2.jpg" alt="">
                    <img src="./imgs/s0.jpg" alt="">
                    <img src="./imgs/s1.jpg" alt="">
                    <img src="./imgs/s2.jpg" alt="">
                </div>
                <span class="left">左</span>
                <span class="right">右</span>
            </div> -->
        </div>
        <div class="bigBox">
            <img src="" alt="">
        </div>
    </div>
    <p class="goodsName"></p>
    <span class="price"></span>
    <input type="button" value="加入购物车">
    <a href="./list.html">回到商品列表</a>
    <a href="./cart.html">去结算</a>
</body>
<script src="./js/ajax.js"></script>
<script src="./js/SmallToBig.js"></script>
<script>

    const id = location.search.split("=")[1];
    // 发起获取商品详情的请求，传入id
    ajax("http://localhost:3000/getDetail?id="+id, res=>{
        // 解析数据
        res = JSON.parse(res).data;
        // 渲染页面
        $(".middleBox img").src = res.src;
        $(".bigBox img").src = res.src;
        $(".goodsName").innerHTML = res.name;
        $(".price").innerHTML = res.price;
        // 获取到数据，页面渲染完成后，再执行放大镜功能
        new SmallToBig();
    })

    function $(select){
        return document.querySelector(select);
    }
</script>
</html>